<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <title>详情</title>
    <!--
        说明: 这个详情,无法写序号 (数据里迟到和早退是写在一起的,分页时无法计算)
    -->
</head>
<body>
<div class="container-fluid pt-20">
    <!--<div class="text-right mt-25 mb-5 f-16">共 <span class="total-num">0</span> 条</div>-->
    <table id="table" class="table table-hover table-responsive table-striped text-center">
        <thead class="invisible">
        <tr>
            <!--<th class="text-center f-14">序号</th>-->
            <th class="text-center f-14">姓名</th>
            <th class="text-center f-14">课组</th>
            <th class="text-center f-14">考勤状态</th>
            <th class="text-center f-14 textName">打卡时间</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="paging-bar" style="text-align:center;margin-top: 15px;"></div>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Details() {
            this.statusText = "";
            this.value = "";
            this.init();
            this.getData();
        }

        Details.prototype = {
            dataVessel: $("#table tbody"),
            init: function () {
                var textName = $(".textName");
                this.status = T.getSession("status");
                this.type = T.getSession("type");

                switch (this.status) {
                    case 0 :
                        this.statusText = "迟到";
                        this.value = "work_at";
                        break;
                    case 1:
                        this.statusText = "早退";
                        this.value = "leave_at";
                        break;
                    default:
                        textName.text("旷工日期");
                        this.statusText = "旷工";
                        this.value = "today";
                }
                textName.parents("thead").removeClass("invisible");
            },
            getData: function () {
                var _this = this;
                _this.dataVessel.html("<tr><td colspan='7'><div class='text-center mt-25 mb-25 f-16'>正在获取数据...</div></td></tr>");

                var url, param, method;
                url = url_join("statistics/abnormal");
                method = "post";
                param = {
                    limit: 10,
                    status: this.status,
                    type: this.type
                };

                T.ajaxPaging(url, method, param, function (res) {
                    var data = typeof res == "object" ? res.data : {};

                    if (data.items.length > 0) {
                        _this.render(data);
                        T.pagingAll(
                            {
                                bar: 'paging-bar',
                                sum: data.total_pages,
                                callback: function (obj) {
                                    param.page = obj.curr;
                                    T.ajaxSecret(url, method, param, function (res) {
                                        var data = res.data;
                                        if (data.items.length > 0) {
                                            _this.render(data);
                                        } else if (data.items.length == 0) {
                                            _this.dataVessel.html("<tr><td colspan='7'><div class='text-center mt-25 mb-25 f-16'>没有相关数据</div></td></tr>");
                                        }
                                    });
                                },
                            }
                        );
                    } else if (data.items.length == 0) {
                        $("#paging-bar").hide();
                        _this.dataVessel.html("<tr><td colspan='7'><div class='text-center mt-25 mb-25 f-16'>没有相关数据</div></td></tr>");
                    }
                });
            },
            render: function (obj) {
                var _this = this,data =obj.items;
                this.dataVessel.html("");

                $.each(data, function (i, v) {
                    var tr = $(
                        '<tr>' +
                        // '<td>' + (data.limit * (data.current - 1) + 1 + i) + '</td>' +
                        '<td>' + v.username + '</td>' +
                        '<td>' + (v.group_names || "无") + '</td>' +
                        '<td>' + _this.statusText + '</td>' +
                        '<td>' + (v[_this.value] || "没有时间数据") + '</td>' +
                        '</tr>'
                    );
                    _this.dataVessel.append(tr);
                });
            },
            constructor: "Details"
        };
        new Details();
    });
</script>
</body>
</html>